/**
 * 基础菜单 部门奖金发放
 */
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">金融中心</el-breadcrumb-item>
      <el-breadcrumb-item> 链单开单</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 体0 -->
    <div class="mydivbox" style="margin-top: 50px; margin-bottom: 20px">
      <template>
        <h3 style="margin-left: 210px">流程进度</h3>
        <el-steps :active="1" align-center>
          <el-step title="链单填写"></el-step>
          <el-step title="信息核对"></el-step>
        </el-steps>
      </template>
    </div>

    <div class="container">
      <div class="head">
        <div class="top">
          <span style="margin-left: 20px">资金产品</span>
        </div>
        <div class="bottom">
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <table border="1">
              <tr>
                <th class="th1">
                  <label style="color: red">*</label>
                  链单流转网络:
                </th>
                <th class="th2">
                  <el-select
                    v-model="formInline.network_id"
                    placeholder="请选择流转网络"
                    :clearable="true"
                    @change="getLable"
                  >
                    <el-option
                      v-for="item in networkData"
                      :label="item.name"
                      :value="item.id"
                      :key="item.id"
                    ></el-option>
                  </el-select>
                </th>
                <th class="th1">链单编号:</th>
                <th class="th2">
                  <el-input
                    size="small"
                    v-model="formInline.chain_no"
                    style="width: 200px"
                  ></el-input>
                  <el-button
                    type="primary"
                    size="mini"
                    @click="createordernum()"
                    >获取单号</el-button
                  >
                </th>
              </tr>
              <tr>
                <th class="th1">
                  <label style="color: red">*</label>
                  融资机构：
                </th>
                <th class="th2">
                  <el-select
                    v-model="formInline.bank"
                    placeholder="请选择融资机构"
                    :clearable="true"
                    
                  >
                    <el-option
                      v-for="item in this.bankData"
                      :label="item.name"
                      :value="item.name"
                      :key="item.id"
                    ></el-option>
                  </el-select>
                </th>
                <th class="th1">
                  <label style="color: red">*</label>
                  资金产品：
                </th>
                <th class="th2">
                  <el-select
                    v-model="formInline.fund_id"
                    placeholder="请选择资金产品"
                    :clearable="true"
                     @change="getfund"
                  >
                    <el-option
                      v-for="item in this.fundData"
                      :label="item.fund_name"
                      :value="item.id"
                      :key="item.id"
                     
                    ></el-option>
                  </el-select>
                </th>
              </tr>
              <tr>
                <th class="th1">授信额度(元):</th>
                <th class="th2">
                  {{ formInline.enterprise_money }}
                </th>
                <th class="th1">可用额度(元):</th>
                <th class="th2">
                  {{ formInline.enterprise_surplus }}
                </th>
              </tr>
            </table>
          </el-form>
        </div>
      </div>
      <div class="head">
        <div class="top">
          <span style="margin-left: 20px">链单内容</span>
        </div>
        <div class="bottom">
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <table border="1">
              <tr>
                <th class="th1">
                  <label style="color: red">*</label>
                  收单人:
                </th>
                <th class="th2">
                  {{name}}
                </th>
                <th class="th1">
                  <label style="color: red">*</label>
                  链单金额:
                </th>
                <th class="th2">
                  <el-input
                    size="small"
                    v-model="formInline.surplus"
                    style="width: 220px"
                    placeholder="请输入链单面值金额"
                  ></el-input>
                </th>
              </tr>
              <tr>
                <th class="th1">
                  <label style="color: red">*</label>
                  开单日:
                </th>
                <th class="th2">
                  <label for="" style="font-size: 14px">开单复核审核当天</label>
                </th>
                <th class="th1">
                  <label style="color: red">*</label>
                  兑付日:
                </th>
                <th class="th2">
                  <div class="block">
                    <el-date-picker
                      v-model="formInline.deadline"
                      type="datetime"
                      value-format="yyyy-MM-dd hh:mm:ss"
                      placeholder="选择日期时间"
                    >
                    </el-date-picker>
                  </div>
                </th>
              </tr>
              <tr>
                <th class="th1">补贴范围:</th>
                <th class="th2">
                  <el-radio-group v-model="formInline.subsidy">
                    <el-radio :label="1" >补贴</el-radio>
                    <el-radio :label="2" >不补贴</el-radio>
                  </el-radio-group>
                </th>
                <th class="th1"></th>
                <th class="th2"></th>
              </tr>
            </table>
          </el-form>
        </div>
      </div>
      <div class="head">
        <div class="top">
          <span style="margin-left: 20px">单据凭证</span>
        </div>
        <div class="bottom1">
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <table border="1">
              <tr>
                <th class="th1">
                  <label style="color: red">*</label>
                  合同附件:
                </th>
                <th class="th2">
                  <div class="flex-div uploaditem">
                    <el-tooltip
                      class="item"
                      effect="dark"
                      :content="tag.name"
                      placement="top-start"
                      v-for="(tag, index) in fileList1"
                      :key="index"
                    >
                      <el-tag
                        style="margin-right: 10px; display: flex"
                        :disable-transitions="false"
                        @close="handleClose1(tag)"
                        closable
                        @click="downloadFile(tag)"
                        ><i class="el-icon-paperclip"></i
                        ><span class="tagtext">{{ tag.name }}</span></el-tag
                      >
                    </el-tooltip>
                    <el-upload
                      class="upload-demo"
                      action
                      :http-request="uploadFile1"
                      :limit="fileLimit"
                      :file-list="fileList1"
                      :on-exceed="handleExceed"
                      :before-upload="beforeUpload"
                      :show-file-list="false"
                      :headers="headers"
                    >
                      <!-- action="/api/file/fileUpload" -->
                      <el-button class="btn"
                        ><i class="el-icon-paperclip"></i>上传合同附件</el-button
                      >
                    </el-upload>
                  </div>
                </th>
              </tr>
              <tr>
                <th class="th1">
                  <label style="color: red">*</label>
                  发票附件:
                </th>
                <th class="th2">
                  <div class="flex-div uploaditem">
                    <el-tooltip
                      class="item"
                      effect="dark"
                      :content="tag.name"
                      placement="top-start"
                      v-for="(tag, index) in fileList2"
                      :key="index"
                    >
                      <el-tag
                        style="margin-right: 10px; display: flex"
                        :disable-transitions="false"
                        @close="handleClose2(tag)"
                        closable
                        @click="downloadFile(tag)"
                        ><i class="el-icon-paperclip"></i
                        ><span class="tagtext">{{ tag.name }}</span></el-tag
                      >
                    </el-tooltip>
                    <el-upload
                      class="upload-demo"
                      action
                      :http-request="uploadFile2"
                      :limit="fileLimit"
                      :file-list="fileList2"
                      :on-exceed="handleExceed"
                      :before-upload="beforeUpload"
                      :show-file-list="false"
                      :headers="headers"
                    >
                      <!-- action="/api/file/fileUpload" -->
                      <el-button class="btn"
                        ><i class="el-icon-paperclip"></i>上传发票附件</el-button
                      >
                    </el-upload>
                  </div>
                </th>
              </tr>
              <tr>
                <th class="th1">单据凭证:</th>
                <th class="th2">
                  <div class="flex-div uploaditem">
                    <el-tooltip
                      class="item"
                      effect="dark"
                      :content="tag.name"
                      placement="top-start"
                      v-for="(tag, index) in fileList3"
                      :key="index"
                    >
                      <el-tag
                        style="margin-right: 10px; display: flex"
                        :disable-transitions="false"
                        @close="handleClose3(tag)"
                        closable
                        @click="downloadFile(tag)"
                        ><i class="el-icon-paperclip"></i
                        ><span class="tagtext">{{ tag.name }}</span></el-tag
                      >
                    </el-tooltip>
                    <el-upload
                      class="upload-demo"
                      action
                      :http-request="uploadFile3"
                      :limit="fileLimit"
                      :file-list="fileList3"
                      :on-exceed="handleExceed"
                      :before-upload="beforeUpload"
                      :show-file-list="false"
                      :headers="headers"
                    >
                      <!-- action="/api/file/fileUpload" -->
                      <el-button class="btn"
                        ><i class="el-icon-paperclip"></i>上传单据附件</el-button
                      >
                    </el-upload>
                  </div>
                </th>
              </tr>
            </table>
          </el-form>
           <div style="margin-left:520px;margin-top:80px"><el-button type="success" round @click="check()">下一步，信息核对</el-button></div>
        </div>
        
      </div>
     
      
    </div>
  </div>
</template>

<script>
import { deptList, deptSave, deptDelete } from "../../api/userMG";
import Pagination from "../../components/Pagination";
export default {
  data() {
    return {
      loginuser: "", //登录用户
      name:"",
      loading: false, //是显示加载
      editForm: {
        chain_no: "",
      },
      formInline: {
        id:"",
        network:"",
        network_id:"",
        bank:"",
        fund_name:"",
        fund_id:"",
        username:"xx公司",
        deadline:"",
        subsidy:"",
        chain_no:"",
        creator:"",
       money:"",
       enterprise_money:"",
       enterprise_surplus:"",
       enterprise_id:"",
        page: 1,
        limit: 10,
        // token: localStorage.getItem("logintoken"),
      },
      //上传后的文件列表
      fileList1: [],
      fileList2: [],
      fileList3: [],
      // 允许的文件类型
      fileType: [
        "pdf",
        "doc",
        "docx",
        "xls",
        "xlsx",
        "txt",
        "png",
        "jpg",
        "bmp",
        "jpeg",
      ],
      // 运行上传文件大小，单位 M
      fileSize: 50,
      // 附件数量限制
      fileLimit: 5,
      //上传的文件名
      fileName:"",
      //请求头
      headers: { "Content-Type": "multipart/form-data" },
      dataSize: "",
      userparm: [], //搜索权限
      listData: [], //用户数据
      scfpData: [], //用户数据
      bankName:[],
      fundName:[],
      enterpriseData:[],//所有企业
      bankData:[],//所有银行
      fundData:[],//所有产品
      networkData:[],//根据登录者的核心企业id来查对应的流转网络
      // 分页参数
      pageparm: {
        currentPage: 1,
        pageSize: 10,
        total: 10,
      },
    };
  },
  // 注册组件
  components: {
    Pagination,
  },
  /**
   * 创建完毕
   */
  created() {
    this.getdata(this.formInline);
  },

  /**
   * 里面的方法只有被调用才会执行
   */
  methods: {
    // 获取公司列表
    getdata(parameter) {
      this.loginuser = JSON.parse(
        localStorage.getItem("userdata")
      ).employee_name;
      this.formInline.id = JSON.parse(
        localStorage.getItem("userdata")
      ).id;
      this.name = JSON.parse(
        localStorage.getItem("userdata")
      ).name;
      this.formInline.enterprise_id=JSON.parse(localStorage.getItem("userdata")).enterprise_id;
      // if(this.formInline.enterprise_id!=1){
      //     alert("非核心企业无法开单")
      // }
      this.loading = true;
      /***
       * 调用接口，注释上面模拟数据 取消下面注释
       */
      // deptList(parameter)
      this.$axios
        .post("/api/chain/findAll", this.pageparm)
        .then((res) => {
          console.log("findall", res);
          this.loading = false;
          if (res.data.code == 200) {
            this.listData = res.data.data.list;
            this.dataSize = res.data.data.total+1;
            console.log("daxiao",this.dataSize);
            this.formInline.id=this.dataSize;
            // console.log("listData",this.listData)
            var arr1=[];
            var arr2=[];

            for(let i of this.listData){
              arr1.push(i.bank)
              arr2.push(i.scfpFund.fund_name)
            };
            //前端去重银行名字
            this.bankName=[... new Set(arr1)]
            this.fundName=[... new Set(arr2)]
            // console.log(this.listData[0].scfpUser.name);
            // 分页赋值
            this.pageparm.currentPage = this.formInline.page;
            this.pageparm.pageSize = this.formInline.limit;
            this.pageparm.total = res.data.data.total;
          }
        })
        .catch((err) => {
          this.loading = false;
        });
        this.$axios.get("/api/chain/findAllBank").then(
          (res)=>{
            // console.log("bank",res)
            if(res.data.code == "200"){
              this.bankData=res.data.data;
              // console.log("bankData",this.bankData)
            }
          }
        );
        this.$axios.get("/api/chain/findAllEnterprise").then((res)=>{
          this.enterpriseData=res.data.data;
          for(let i of this.enterpriseData){
            if(this.formInline.enterprise_id==i.id){
              this.formInline.enterprise_money=i.money;
              this.formInline.enterprise_surplus=i.surplus;
            }
          }
            // console.log("enterprise",res);
        })
        this.$axios.get("/api/network/findByCoreId/"+this.formInline.enterprise_id).then(
          (res)=>{
            // console.log("流转网络",res)
            if(res.data.code == "200"){
              this.networkData=res.data.data;
              // console.log("bankData",this.bankData)  

            }
          }
        )
        this.$axios.get("/api/chain/findAllFund").then(
          (res)=>{
            // console.log("fund",res)
            if(res.data.code == "200"){
              this.fundData=res.data.data;
              // console.log("bankData",this.bankData)
            }
          }
        )
    },
    getLable(val){
      this.networkData.map(item => {
        if(item.id===val){
          this.formInline.network=item.name;
        }
      })
    },
    getfund(val){
      //  console.log("item",item)
        // console.log("val",val)
      this.fundData.map(item => {
       
        if(item.id===val){
          this.formInline.fund_name=item.fund_name;
          // console.log("cs",this.formInline)
        }
      })
    },
    //下拉框动态获取值去查询数据
    // selectChange(item){
    //   var bankname=item+""
    //   console.log(bankname)
    //   this.$axios
    //     .get("/api/chain/getEnterprise/"+this.formInline.bank)
    //     .then((res) => {
    //       console.log("item", res);
    //   if (res.data.code=="200") {
    //     this.formInline.money=res.data.data.money;
    //     this.formInline.surplus=res.data.data.surplus;
    //   }
    //       })
    // },
    //获取随机单号
    createordernum() {
      const now = new Date();
      let month = now.getMonth() + 1;
      let day = now.getDate();
      let hour = now.getHours();
      let minutes = now.getMinutes();
      let seconds = now.getSeconds();
      let Code =
        "WNXY" +
        now.getFullYear().toString() +
        month.toString() +
        day +
        hour +
        minutes +
        seconds +
        Math.round(Math.random() * 1000000).toString();
      console.log(Code);
      //基于年月日时分秒+随机数生成订单编号
      this.formInline.chain_no = Code;
    },
    //上传文件之前
    beforeUpload(file) {
      if (file.type != "" || file.type != null || file.type != undefined) {
        //截取文件的后缀，判断文件类型
        const FileExt = file.name.replace(/.+\./, "").toLowerCase();
        //计算文件的大小
        const isLt5M = file.size / 1024 / 1024 < 50; //这里做文件大小限制
        //如果大于50M
        if (!isLt5M) {
          this.$showMessage("上传文件大小不能超过 50MB!");
          return false;
        }
        //如果文件类型不在允许上传的范围内
        if (this.fileType.includes(FileExt)) {
          return true;
        } else {
          this.$message.error("上传文件格式不正确!");
          return false;
        }
      }
    },
    //这是我自定义的移除事件
    handleClose1(i) {
      //动态删除文件
      this.$axios
        .delete("/api/file/delete/"+this.fileName)
        .then((res) => {
          // console.log("delete", res);
          })
      this.fileList1.splice(i, 1); //删除上传的文件
      if (this.fileList1.length == 0) {
        //如果删完了
        this.fileflag = true; //显示url必填的标识
      }
    },
    handleClose2(i) {
      //动态删除文件
      this.$axios
        .delete("/api/file/delete/"+this.fileName)
        .then((res) => {
          // console.log("delete", res);
          })
      this.fileList2.splice(i, 1); //删除上传的文件
      if (this.fileList2.length == 0) {
        //如果删完了
        this.fileflag = true; //显示url必填的标识
      }
    },
    handleClose3(i) {
      //动态删除文件
      this.$axios
        .delete("/api/file/delete/"+this.fileName)
        .then((res) => {
          // console.log("delete", res);
          })
      this.fileList3.splice(i, 1); //删除上传的文件
      if (this.fileList3.length == 0) {
        //如果删完了
        this.fileflag = true; //显示url必填的标识
      }
    },
    //超出文件个数的回调
    handleExceed() {
      this.$message({
        type: "warning",
        message: "超出最大上传文件数量的限制！",
      });
      return;
    },
    //上传文件的事件
    uploadFile1(item) {
      //上传文件的需要formdata类型;所以要转
      let FormDatas = new FormData();
      FormDatas.append("file", item.file); 
      this.$axios
        .post("/api/file/upload/" + this.dataSize+"/合同附件", FormDatas)
        .then((res) => {
          // console.log("file", res);
          this.fileName=res.data.data.file_name;
          if (res.data.code=="200") {
            this.fileList1.push(item.file); //成功过后手动将文件添加到展示列表里
            let i = this.fileList1.indexOf(item.file);
            this.fileList1[i].id = res.data.id; //id也添加进去，最后整个大表单提交的时候需要的
            if (this.fileList1.length > 0) {
              //如果上传了附件就把校验规则给干掉
              this.fileflag = false;
            }
            //this.handleSuccess();
          }
        });
    },
    uploadFile2(item) {
      //上传文件的需要formdata类型;所以要转
      let FormDatas = new FormData();
      FormDatas.append("file", item.file); 
      this.$axios
        .post("/api/file/upload/" + this.dataSize+"/发票附件", FormDatas)
        .then((res) => {
          // console.log("file", res);
          this.fileName=res.data.data.file_name;
          if (res.data.code=="200") {
            this.fileList2.push(item.file); //成功过后手动将文件添加到展示列表里
            let i = this.fileList2.indexOf(item.file);
            this.fileList2[i].id = res.data.id; //id也添加进去，最后整个大表单提交的时候需要的
            if (this.fileList2.length > 0) {
              //如果上传了附件就把校验规则给干掉
              this.fileflag = false;
            }
            //this.handleSuccess();
          }
        });
    },
    uploadFile3(item) {
      //上传文件的需要formdata类型;所以要转
      let FormDatas = new FormData();
      FormDatas.append("file", item.file); 
      this.$axios
        .post("/api/file/upload/" + this.dataSize+"/单据凭证", FormDatas)
        .then((res) => {
          // console.log("file", res);
          this.fileName=res.data.data.file_name;
          if (res.data.code=="200") {
            this.fileList3.push(item.file); //成功过后手动将文件添加到展示列表里
            let i = this.fileList3.indexOf(item.file);
            this.fileList3[i].id = res.data.id; //id也添加进去，最后整个大表单提交的时候需要的
            if (this.fileList3.length > 0) {
              //如果上传了附件就把校验规则给干掉
              this.fileflag = false;
            }
            //this.handleSuccess();
          }
        });
    },
    //上传成功后的回调
    handleSuccess() {},

    //审核按钮
    check(){
        //creator的id有当前登录企业获取，现在无法获取，假数据
      this.formInline.creator=this.formInline.enterprise_id;
      this.formInline.money=this.formInline.surplus;
      // console.log("formInline",this.formInline);
      this.$router.push({
        path:'/chain/ChainDoubleCheck',
        query:{
             elderInfo:JSON.stringify(this.formInline) 
        }
    })
      
    }
  },
};
</script>

<style scoped>
.user-search {
  margin-top: 20px;
}
.userRole {
  width: 100%;
}
.mydivbox {
  margin: 0 auto;
  width: 500px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  padding-left: 20px;
  padding-top: 20px;
  padding-right: 20px;
  padding-bottom: 20px;
}
.mydivboxhead {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  padding-left: 20px;
  padding-top: 20px;
  padding-right: 20px;
  padding-bottom: 20px;
  margin: -20px -20px auto;
}

.container {
  width: 80%;
  border: 1px solid rgb(138, 138, 138);
  margin: 0 auto;
  height: 1400px;
}
.container .head {
  width: 100%;
  height: 300px;
}
.container .head .top {
  width: 100%;
  background-color: #f3f3f3;
  height: 50px;
  line-height: 50px;
}
.container .head .bottom {
  height: 180px;
  width: 90%;
  margin: 0 auto;
  margin-top: 35px;
}

table {
  width: 100%;
  height: 100%;
  border-collapse: collapse;
}
tr {
  height: 60px;
}
.th1 {
  width: 20%;
  padding-right: 10px;
  background-color: #f3f3f3;
  text-align: right;
  font-size: 14px;
}
.th2 {
  width: 30%;
}
.bottom1 {
  width: 90%;
  height: 260px;
  margin: 0 auto;
  margin-top: 35px;
}
.bottom1 .th1 {
  width: 20%;
}
.bottom1 .th2 {
  width: 80%;
}
.bottom1 tr {
  height: 180px;
}
</style>

 
 